<template>
  <div class="serachResult">
    <!-- 头部标题 -->
    <van-nav-bar
      class="nav-main"
      title="搜索结果"
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <!-- list列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="别拉了,我也是有底线的"
      @load="onLoad"
    >
      <!-- {{ active }} -->

      <van-cell
        v-for="(item, index) in wenzList"
        :key="index"
        @click="$router.push('/detail/' + item.art_id)"
      >
        <template #title>
          <!-- 文章的标题 -->
          <h3>{{ item.title }}</h3>
          <!-- 文章的图片 -->
          <van-grid
            v-if="item.cover.type !== 0"
            :border="false"
            :column-num="3"
          >
            <van-grid-item
              v-for="(imgitem, imgindex) in item.cover.images"
              :key="imgindex"
            >
              <!-- 懒加载lazy-load -->
              <van-image lazy-load :src="imgitem" />
            </van-grid-item>
          </van-grid>
          <!-- 文章的其它信息 -->
          <div class="otherbox">
            <div class="left">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }} 条评论</span>
              <span>{{ item.pubdate | fromtime }}</span>
            </div>
          </div>

          <!-- 评论点赞,分享 -->
          <van-grid direction="horizontal" :column-num="3">
            <van-grid-item
              icon="comment-o"
              :text="item.comm_count.toString()"
              @click="comment"
            />
            <van-grid-item icon="like-o" text="点赞" dot @click="zan" />
            <van-grid-item icon="exchange" text="分享" @click="fenx" />
          </van-grid>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
/*
搜索结果 - 完成结构 & 样式
  头部标题,index页面cv,加固定和左箭头
  文章列表:cv过来样式和结构,先把不改渲染的注释掉,加上评论点赞,分享,找宫格,然后找图标



  路由的回退
   a.给箭头添加点击事件,有两种方式解决,this.$router.go(-1)  this.$router.back()

搜索结果-渲染数据
  a.发送请求到服务器得到相应的文章数据,要带三个参数,page,perpage,q
  b.连接数组,为了每次上拉拼接,而不是都是10条
  c.loading要加载完成,不然会一直转圈请求,页码也要加加
  d.判断数组的长度为0,那就要全部加载完毕



  渲染评论条数
  a.:text="item.comm_count.toString()"来跟上面的评论条数对应上,要加toSring来转换,不然渲染不了


  判断登录 - 直接在评论按钮中完成登录判断
    a.给评论按钮添加点击事件
    b.先获取token,取反判断token,未登录提示信息,跳转到登录页,终止代码的运行
    
判断登录 - 将登录验证封装为一个全局方法(点击点赞事件)
 a. 在 main.js 中向 Vue 的 prototype 中添加一个 $login 方法,把之前评论的逻辑代码包到里面
 b. 在点赞按钮中通过: !this.$login() 方法来验证登录,然后终止代码


 判断分享 点赞 评论 
   a.逻辑代码都一样,给它添加点击事件,调用main.js全局封装的方法,和自己封装的组件


判断登录 -  登录成功后回退到登录之前的页面
  a.在router下的index下添加一个路由path: '/checklogin', 
  b.在login.vue页面判断,如果是正常登录是跳转到首页,如果是未登录跳转到上一个页面
  c. 在验证验证的 $login 方法中，如果判断出用户没有登录，应该跳转到 /checkLogin 中










*/

import { apiSearch } from '@/api/search.js'
import { getLocal } from '@/utils/local.js'

export default {
  data () {
    return {
      loading: false, // list组件是否处于加载, true正在加载,false已加载完成
      finished: false, // list 组件中的数据源是否加载完毕： true 数据源加载完毕没有更多了 & false 数据没有加载完毕，还可以继续加载
      page: 1, // 页数
      perpage: 10, //每页数量,页容量
      key: this.$route.params.key, // search页面接收到的值
      wenzList: [] // 搜索结果文章数组
    }
  },
  methods: {
    // 点击分享,判断登录
    fenx () {
      if (!this.$login()) {
        return
      } else {
        console.log('分享成功')
      }
    },

    // 点赞,判断用户是否登录,说明未登录,不需要执行后续代码
    zan () {
      if (!this.$login()) {
        return
      }
    },

    // 点击评论 判断用户是否登陆,取反,未登录就提示未登录,跳转到登录页,终止后续的代码
    comment () {
      var token = getLocal('token')
      if (!token || !token.token) {
        this.$toast.fail('对不起,你还未登录')
        this.$router.push('/login')
        return
      } else {
        //成功
        // this.$toast.success('登陆成功')
      }
    },
    //点击左箭头返回
    onClickLeft () {
      // this.$router.back()
      this.$router.go(-1)
    },
    // 发送请求到服务器得到关键字对应的文章数据
    async onLoad () {
      const res = await apiSearch({
        page: this.page,
        perpage: this.perpage,
        q: this.key
      })
      // console.log(res)
      // 连接数组,为了每次上拉拼接,而不是都是10条, loading加载完成,页码要加加,判断长度不为0,为零就全部加载完毕
      
      this.wenzList = [...this.wenzList, ...res.data.data.results],
      this.loading = false,
      this.page++
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.serachResult {
  margin-top: 46px;
  // /deep/ 深度选择器：如果希望 scoped 中的样式影响子组件可以使用：尝试选择器
  /deep/ .nav-main {
    background-color: #3296fa;
    z-index: 9999;  // 解决单元格带来的影响
    .van-nav-bar__title {
      color: honeydew;
      z-index: 999;
    }
  }
  .otherbox {
    display: flex;
    justify-content: space-between;

    .left {
      span {
        margin-right: 10px;
      }
    }
    .right {
      border: 1px solid #999;
      width: 24px;
      height: 18px;
      text-align: center;
      line-height: 24px;
      background-color: skyblue;
    }
  }

  /deep/ .van-icon-arrow-left::before {
    content: '\F008';
    color: #fff;
  }
}
</style>
